import React, { useState } from "react";
import styles from "./Me.module.css";
import { useNavigate } from "react-router-dom";

export default function EditProfile() {
    const navigate = useNavigate();
    const [avatar, setAvatar] = useState("1.jpg");
    const [nickname, setNickname] = useState("烦");
    const [douyinId, setDouyinId] = useState("1231231");
    const [age, setAge] = useState("");
    const [introduction, setIntroduction] = useState("");

    const handleAvatarChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onloadend = () => {
                setAvatar(reader.result);
            };
            reader.readAsDataURL(file);
        }
    };

    const handleSave = () => {
        // 这里可以添加保存数据到后端的逻辑
        navigate(-1); // 返回上一页
    };

    return (
        <div className={styles.editProfilePage}>
            <h2>编辑主页</h2>
            <div className={styles.avatarSection}>
                <img src={avatar} alt="Avatar" className={styles.avatar} />
                <input type="file" onChange={handleAvatarChange} />
            </div>
            <div className={styles.inputSection}>
                <label>昵称:</label>
                <input
                    type="text"
                    value={nickname}
                    onChange={(e) => setNickname(e.target.value)}
                />
                <button onClick={() => setNickname(nickname)}>保存</button>
            </div>
            <div className={styles.inputSection}>
                <label>抖音号:</label>
                <input
                    type="text"
                    value={douyinId}
                    onChange={(e) => setDouyinId(e.target.value)}
                />
                <button onClick={() => setDouyinId(douyinId)}>保存</button>
            </div>
            <div className={styles.inputSection}>
                <label>年龄:</label>
                <input
                    type="text"
                    value={age}
                    onChange={(e) => setAge(e.target.value)}
                />
                <button onClick={() => setAge(age)}>保存</button>
            </div>
            <div className={styles.inputSection}>
                <label>简介:</label>
                <textarea
                    value={introduction}
                    onChange={(e) => setIntroduction(e.target.value)}
                />
                <button onClick={() => setIntroduction(introduction)}>保存</button>
            </div>
            <button className={styles.saveButton} onClick={handleSave}>
                全部保存
            </button>
        </div>
    );
}    